<template>
    <!-- 员工后台:申请活动 -->
    <el-form ref="form" :model="form" label-width="120px">
    <el-form-item label="活动名称(必填)">
        <el-input v-model="form.active_name" style="width: 40%;"></el-input>
    </el-form-item>


    <el-form-item label="活动地址(必填)">
        <el-input v-model="form.active_address" style="width: 40%;"></el-input>
    </el-form-item>

    <el-form-item label="开始时间(必填)">
        <div style="width: 40.5%;">
            <el-col :span="12">
            <el-date-picker type="date" placeholder="选择日期(必填)" v-model="form.start_time" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="0.5">—</el-col>
            <el-col :span="11">
            <el-time-picker placeholder="选择时间(必填)" v-model="form.start_time_h" style="width: 100%;"></el-time-picker>
            </el-col>
        </div>
    </el-form-item>

    <el-form-item label="结束时间(必填)">
        <div style="width: 40.5%;">
            <el-col :span="12">
            <el-date-picker type="date" placeholder="选择日期(必填)" v-model="form.end_time" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="0.5">—</el-col>
            <el-col :span="11">
            <el-time-picker placeholder="选择时间(必填)" v-model="form.end_time_h" style="width: 100%;"></el-time-picker>
            </el-col>
        </div>
    </el-form-item>

    
    <el-form-item label="活动图片(必填)">
        <el-upload
            class="upload-demo"
            :action="objData.host"
            :data="objData"
            :before-upload="getOSS"
            :on-success="onSuccess"
            list-type="picture-card"
            :auto-upload="true">
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url" alt=""
                >
                <span class="el-upload-list__item-actions">
                    <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                    >
                    <i class="el-icon-zoom-in"></i>
                    </span>
                </span>
                </div>
        </el-upload>

        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        
    </el-form-item> 

    <el-form-item label="活动内容(必填)">
        <el-input type="textarea" v-model="form.context" style="width: 70%;" :rows="5"></el-input>
    </el-form-item>

    <el-form-item label="活动总结(必填)">
        <el-input type="textarea" placeholder="没有就填无" v-model="form.summary" style="width: 70%;"></el-input>
    </el-form-item>

    <el-form-item>
        <el-button type="primary" @click="onSubmit">确认申请</el-button>
        <el-button @click="restSubmit">重 置</el-button>
    </el-form-item>
    </el-form>
</template>

<script>
    import myAxios from "@/tools/myAxios";
    import Qs from 'qs';
    import axios from "axios";
    import {nanoid} from 'nanoid';
    axios.defaults.withCredentials = true;
    export default {
        name:'StatusEmployeeCreateActive',
        data() {
            return {
                // 新的活动信息
                form: {
                    active_name:'',
                    active_address:'',
                    start_time:'',
                    start_time_h:'',
                    end_time:'',
                    end_time_h:'',
                    context:'',
                    summary:'',

                    employee_id:null,
                    admin_id:null,
                    p1:'',
                    p2:''
                },

                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false,
                // 图片上传后端签名数据
                objData:{
                    OSSAccessKeyId:'',
                    policy:'',
                    Signature:'',
                    key:'',
                    dir:'',
                    host:''
                },
                // 当前上传的头像的url
                pictureUrl:[],

                myUUID:'',       // uuid
                myData:'',       // images/当前时间/
            }
        },
        methods:{
            // 放大
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            // 申请活动
            onSubmit() {

                if(
                    this.form.active_name === ''    ||
                    this.form.active_address === '' ||
                    this.form.start_time === ''     ||
                    this.form.start_time_h === ''   ||
                    this.form.end_time === ''       ||
                    this.form.end_time_h === ''     ||
                    this.form.context === ''        ||
                    this.form.summary === ''        ||
                    this.pictureUrl.length !== 2 
                ){
                    // 提示一下
                    this.$message({
                        message: '请将活动信息填写完整!',
                        type: 'warning'
                    });
                    return;
                }

                this.form.employee_id = JSON.parse(sessionStorage.getItem('user')).id;
                this.form.admin_id = JSON.parse(sessionStorage.getItem('user')).admin_id;
                this.form.p1 = this.pictureUrl[0];
                this.form.p2 = this.pictureUrl[1];
 
                myAxios(
                    'http://localhost:8088/employee/addActiveOnEmployee',
                    'post',
                    Qs.stringify(this.form),
                    (data)=>{
                        window.location.reload();
                        // 提示一下
                        this.$message({
                            message: '申请成功!',
                            type: 'success'
                        });
                    }
                )
            },
            // 重置
            restSubmit(){
                window.location.reload();
            },
             // 拿到oss的服务端签名
             getOSS(file){
                let _this = this;
                return new Promise((resolve,reject)=>{
                    // 请求后端
                    axios.get('http://localhost:8088/oss/policy').then(
                        response => {
                            _this.objData.OSSAccessKeyId = response.data.data.accessId;
                            _this.objData.policy = response.data.data.policy;
                            _this.objData.Signature = response.data.data.signature;
                            _this.objData.dir = response.data.data.dir;
                            _this.objData.host = response.data.data.host;                           // 直传oss地址
                            _this.myUUID = nanoid();      // uuid
                            _this.objData.key = response.data.data.dir+_this.myUUID+"${filename}";      // 文件名,使用nanoid生成唯一值
                            _this.myData = response.data.data.dir;     // images/时间/
                            resolve(true);   // 继续上传
                        },
                        error => {
                            console.log(error.message);
                            reject(false);   // 停止上传
                        }
                    )
                });
            },
            // 图片上传成功时调用
            onSuccess(response, file, fileList){
                if(fileList.length > 2){
                    fileList.shift();
                    this.pictureUrl.shift();
                }
                this.pictureUrl.push('https://pension-system-wj.oss-cn-beijing.aliyuncs.com/'+this.myData+this.myUUID+file.name);
            },
        },

    }
</script>

<style lang="less" scoped>
    .detail-user{
        display: flex;
        justify-content: left;
        align-items: center;

        .el-upload__tip,.el-upload-list--picture .el-upload-list__item {
            margin-top: 0px;
        }

        .el-image{
            width: 140px; 
            height: 140px;
            border-radius: 5px;
            margin-bottom: 10px;
            margin-right: 5px;
        }
    }
</style>